<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4">
          <div class="title">
            <el-avatar
              src="http://localhost:3000/upload/aniya.jpg"
              :size="60"
            ></el-avatar>
          </div>
        </el-col>
        <el-col :span="16">
          <el-breadcrumb separator="">
            <el-breadcrumb-item :to="{ path: '/' }">
              <h3 class="firstpage">回到首页</h3>
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/list' }">
              <h3 class="firstpage">回到列表页</h3>
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/message' }">
              <h3 class="firstpage">点击留言</h3>
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/About' }">
              <h3 class="firstpage">联系我们</h3>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="4">
          <div class="load">
            <el-button type="primary" class="login-button" @click="handlelogin"
              >登录</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container class="maincontainer">
      <el-main class="main">
        <el-aside class="nav">
          <el-card
            shadow="hover"
            style="
              height: 480px;
              width: 260px;
              overflow-y: auto;
              overflow-x: hidden;
              margin: 11px auto;
            "
          >
            <img :src="article.imgPath" class="image" />
            <el-descriptions :column="number" size="medium" :contentStyle="cs">
              <el-descriptions-item label="作者">{{
                article.author
              }}</el-descriptions-item>
              <el-descriptions-item label="居住地">{{
                article.location
              }}</el-descriptions-item>
              <el-descriptions-item label="身份">
                <el-tag size="small">{{ article.identify }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="点击量">
                <el-tag size="middle">{{ article.click }}次</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-aside>
        <el-main class="postdetail">
          <el-card
            shadow="hover"
            style="
              height: 430px;
              width: 530px;
              overflow-y: auto;
              overflow-x: hidden;
              margin: 11px auto;
            "
          >
            <h2>{{ article.title }}</h2>
            <p v-html="article.content">
              {{ article.content }}
            </p>
          </el-card>
        </el-main>
        <el-main class="comment">
          <el-card
            shadow="hover"
            class="box-card"
            style="height: 450px; overflow-y: auto; overflow-x: hidden"
          >
            <el-input
              v-model="keyword"
              placeholder="回车发送评论"
              @keyup.enter.native="handleComment"
            ></el-input>
            <div v-for="o in comments" :key="o.id" class="text item">
              {{ o.content }}
            </div>
          </el-card>
        </el-main>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      id: 0,
      keyword: '',
      cs: { height: '50px' },
      number: 1,
      article: {},
      comments: [],
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getArticle(this.id)
    this.getComment(this.id)
    this.$api.putAddClick(this.id)
  },
  methods: {
    getArticle(id) {
      this.$api.getOneArticle(id).then((res) => {
        this.article = res.data.result
      })
    },
    getComment(id) {
      this.$api.getCommentById(id).then((res) => {
        this.comments = res.data.result
      })
    },
    handleComment() {
      this.$api.postAddComment(this.id, this.keyword).then((res) => {
        this.keyword = ''
        this.$message.success(res.data.message)
        this.getComment(this.id)
      })
    },
    handlelogin() {
      window.location.href = 'http://localhost:8080/login'
    },
  },
}
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
body {
  background-image: url('../assets/images/aniya3.jpg');
}
el-descriptions {
  height: 30px;
  margin: 0px;
}
.header {
  display: flex;
  justify-content: space-around;
  height: 30vh;
  background-color: pink;
  color: #333;
  text-align: center;
  line-height: 80px;
}
.image {
  width: 100%;
  display: block;
}
.listpage,
.load,
.firstpage {
  text-align: center;
  line-height: 80px;
  margin: 5px 40px;
  font-size: 24px;
  font-family: KaiTi;
}
.el-card__header {
  height: 80px;
}

.main {
  display: flex;
  justify-content: space-between;
}
.nav {
  background-color: #475669;
  height: 70vh;
  width: 20vw;
  display: inline-block;
}
.postdetail {
  overflow: auto;
  width: 50vw;
  height: 70vh;
  background-color: #475669;
  margin: 40px;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 50px;
  word-break: break-all;
  word-wrap: break-word;
}
.comment {
  width: 20vw;
  height: 70vh;
  background-color: #475669;
  margin: 40px;
  height: 70vh;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.nav {
  margin: 40px;
  height: 70vh;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  word-break: break-all;
  word-wrap: break-word;
}
.maincontainer {
  margin: 10px auto;
  width: 95vw;
  height: 88vh;
  background-color: #475669;
}
.el-card {
  transition: all 0.5s;
}
.el-card:hover {
  margin-top: -5px;
}
.login-button {
  width: 70px;
  height: 40px;
}
</style>
